<template>
  <div class="my-images">
    <span class="welcome">
      尊敬的<b>{{admin.adminName}}</b>，欢迎登录佛山市小布村管理平台！
    </span>
    <div class="welcome-center">
      <div class="data-box">
        <!--     左边一张图片     -->
        <img src="../../assets/image/che.svg" alt="">
        <!--     数据以及名字   -->
        <div class="box-name">
          <div class="num">{{vehicleApplyNum}}</div>
          <div class="name">待审批车辆</div>
        </div>
      </div>

      <div class="data-box">
        <!--     左边一张图片     -->
        <img src="../../assets/image/fankui.svg" alt="">
        <!--     数据以及名字   -->
        <div class="box-name">
          <div class="box-name">
            <div class="num">{{ feedbackNum }}</div>
            <div class="name">待处理反馈</div>
          </div>
        </div>
      </div>

      <div class="data-box">
        <!--     左边一张图片     -->
        <img src="../../assets/image/zhaobiao.svg" alt="">
        <!--     数据以及名字   -->
        <div class="box-name">
          <div class="box-name">
            <div class="num">{{biddingNum}}</div>
            <div class="name">待处理投标</div>
          </div>
        </div>
      </div>

      <div class="data-box">
        <!--     左边一张图片     -->
        <img src="../../assets/image/huodong.svg" alt="">
        <!--     数据以及名字   -->
        <div class="box-name">
          <div class="box-name">
            <div class="num">{{registrationNum}}</div>
            <div class="name">今日活动报名数</div>
          </div>
        </div>
      </div>

    </div>

    <div class="welcome-echarts">
      <div id="main" style="width: 100%;height: 500px; background-color:#fff;">

      </div>
    </div>

  </div>

</template>

<script>
import {getBiddingNum, getFeedbackNum, getRegistrationByDate, getRemarkCharts, getVehicleApplyNum} from "@/api/allApi";
import * as echarts from 'echarts';
export default {

  data() {
    return {
      admin:'',
      vehicleApplyNum:0,
      feedbackNum:0,
      biddingNum:0,
      registrationNum:0,
    }
  },
  created() {
    this.admin = JSON.parse(window.localStorage.getItem('access-admin'))
  },
  methods:{
    getVehicleApplyNum() {
      getVehicleApplyNum().then(res=>{
        this.vehicleApplyNum = res.data.data
      })
    },
    getFeedbackNum() {
      getFeedbackNum().then(res=>{
        this.feedbackNum = res.data.data
      })
    },
    getBiddingNum() {
      getBiddingNum().then(res=>{
        this.biddingNum = res.data.data
      })
    },
    getRegistrationByDate() {
      getRegistrationByDate().then(res=>{
        this.registrationNum = res.data.data
      })
    },
  },
  mounted() {
    this.getVehicleApplyNum()
    this.getFeedbackNum()
    this.getBiddingNum()
    this.getRegistrationByDate()


    //折线图
    {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option = {
        xAxis: {
          name:'评论日期',
          type: 'category',
          data: []
        },
        yAxis: {
          name:'评论数',
        },
        series: [
          {
            data: [],
            type: 'line'
          }
        ]
      };
      getRemarkCharts().then(res=>{
        option.xAxis.data = res.data.data.x
        option.series[0].data = res.data.data.y
        myChart.setOption(option);
      })
    }




    // 饼图
    /*{
      var pieDom = document.getElementById('pie');
      var pieChart = echarts.init(pieDom);
      var paiOption = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      };
      pieChart.setOption(paiOption);
    }*/

  }
}
</script>

<style lang="less" scoped>
  .my-images {
    width: 100%;
    height: 100%;
    margin-top: 30px;
    /*background: url("https://cdn.staticaly.com/gh/cf-01/image-hosting@master/images/main.308q9f6cxoi0.webp") no-repeat;*/
  }

  .welcome {
    font-size: 20px;
  }

  .welcome-center {
    display: flex;
    justify-content: space-between;
    .data-box {
      display: flex;
      justify-content: space-between;
      width: 20%;
      min-width: 200px;
      height: 100px;
      background-color: #f3f3f3;
      padding: 20px;
      margin-top: 30px;

      img {
        width: 50px;
      }

      .box-name {
        .num {
          display: flex;
          justify-content: center;
          font-size: 25px;
          font-family: 微软雅黑;
          font-weight: 700;
          color: #333;
        }

        .name {
          margin-top: 5px;
        }
      }

    }
  }


  .welcome-echarts {
    padding-top: 40px;
  }
</style>